<template>
  <div class="container">
    <div class="opt-area-02">
      <div class="left-con">
        <!-- <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择统计类型" style="width: 164px" v-model="params.department">
            <Option value="1">政权一套表</Option>
            <Option value="2">救助一套表</Option>
            <Option value="3">养老一套表</Option>
            <Option value="4">殡葬一套表</Option>
          </Select>
        </div> -->
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入身份证号码" style="width: 164px" v-model="params.cardno"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                 icon="ios-search"/>
        </div>
        <Button class="btnClass" type="info" size="small" @click="searchData(1)">搜索</Button>
        <Button class="btnClass" type="success" size="small" @click="setData(1)">方案设置</Button>
        <Button class="btnClass" type="warning" size="small" @click="selectFa()">选择方案查询</Button>
        <Button class="btnClass" type="primary" size="small" @click="exportFaData()">导出</Button>
        <Button class="btnClass" type="primary" size="small" @click="setColcumes()">查询字段设置</Button>
        </div>
    </div>
    <Table border :columns="defaultColumns" :data="dataList" :loading="loading" size="small" ref="table">
        <template slot="labelInfo" slot-scope="{ row, index }">
          <div v-for="(item, index) in row.labelList" v-bind:key="index">{{item.first_level_name}}-{{item.second_level_name}}</div>
        </template>
        <template slot="gridInfo" slot-scope="{ row, index }">
          <div v-for="(item, index) in row.gridList" v-bind:key="index">{{item.residential_name}}{{item.garden_name}}{{item.building_name}}{{item.unit_name}}{{item.floor_name}}<span v-if="item.doorplate_name">-</span>{{item.doorplate_name}}</div>
        </template>
        <!-- <template slot="action" slot-scope="{ row }">
          <Row style="margin-bottom: 5px; margin-top: 2px">
            <Button class="table-action-btn" style="margin-right: 5px" type="success" size="small" @click="show(row, true)">编辑</Button>
          </Row>
        </template> -->
      </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
            @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
    <Drawer title="方案设置" v-model="drawer1" width="1020">
      <Form :model="formData">
        <Row :gutter="16">
          <Col span="8">
            <Card dis-hover class="card_div">
              <p slot="title">方案设置</p>
                <Row>
                  <Col span="12">
                    <Radio-group v-model="formInfo.department_radio" vertical @on-change="changeType(1, 'business', 'department', formInfo.department_radio)">
                      <Radio :label="item.department" v-for="(item, index) in programmeTypeData[0]" v-bind:key="index">
                        <Icon type="social-apple"></Icon>
                        <span>{{item.department}}</span>
                      </Radio>
                    </Radio-group>
                  </Col>
                  <Col span="12">
                    <Radio-group v-model="formInfo.business_radio" vertical @on-change="changeType(2, 'field', 'business', formInfo.business_radio)">
                      <Radio :label="item.business" v-for="(item, index) in programmeTypeData[1]" v-bind:key="index">
                        <Icon type="social-apple"></Icon>
                        <span>{{item.business}}</span>
                      </Radio>
                    </Radio-group>
                  </Col>
                </Row>
            </Card>
            <Card dis-hover class="card_div" style="margin-top:5px;">
              <p slot="title">方案列表</p>
              <Row>
                <Radio-group v-model="formInfo.fa_data" vertical @on-change="changeFa(formInfo.fa_data)">
                  <Radio :label="JSON.stringify(item)" v-for="(item, index) in faDataList" v-bind:key="index">
                    <Icon type="social-apple"></Icon>
                    <span>{{item.programme_name}}</span>
                  </Radio>
                </Radio-group>
              </Row>
            </Card>
          </Col>
          <Col span="16">
            <Transfer
              :data="data3"
              :target-keys="targetKeys3"
              :list-style="listStyle"
              :render-format="render3"
              :operations="['To left','To right']"
              filterable
              @on-change="handleChange3">
              <div :style="{float: 'right', margin: '5px'}">
                  <Button size="small" @click="reloadMockData">刷新</Button>
              </div>
            </Transfer>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
        <Button type="primary" @click="complete()">确定</Button>
      </div>
    </Drawer>
    <Drawer title="方案列表" v-model="selectfa_drawer" width="600">
      <Row :gutter="16">
        <Col span="12">
          <Card dis-hover style="height:575px;">
              <Radio-group v-model="formInfo.falist_radio" vertical @on-change="changeFaList()">
                <Radio :label="item.programme_code" v-for="(item, index) in faDataList" v-bind:key="index">
                  <Icon type="social-apple"></Icon>
                  <span>{{item.programme_name}}</span>
                </Radio>
              </Radio-group>
          </Card>
        </Col>
        <Col span="12">
          <Card dis-hover style="height:575px;overflow-y: scroll;">
            <div v-for="(item, index) in yx_fa_list" v-bind:key="index" style="display: block;margin-bottom:5px;">
              <span v-html="indexIcon(index)"></span>
              <span>  {{item.field}}</span>
            </div>
          </Card>
        </Col>
      </Row>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="selectfa_drawer = false">取消</Button>
        <Button type="primary" @click="saveSelFa()">查询</Button>
      </div>
    </Drawer>
    <Drawer title="数据导出方案列表" v-model="exportfa_drawer" width="600">
      <Row :gutter="16">
        <Col span="12">
          <Card dis-hover style="height:275px;overflow-y:scroll;">
              <Radio-group v-model="formInfo.export_data" vertical @on-change="changeExList(formInfo.export_data)">
                <Radio :label="JSON.stringify(item)" v-for="(item, index) in faDataList" v-bind:key="index">
                  <Icon type="social-apple"></Icon>
                  <span>{{item.programme_name}}</span>
                </Radio>
              </Radio-group>
          </Card>
        </Col>
        <Col span="12">
          <Card dis-hover style="height:275px;overflow-y:scroll;">
            <div v-for="(item, index) in yx_fa_list" v-bind:key="index" style="display: block;margin-bottom:5px;">
              <span v-html="indexIcon(index)"></span>
              <span> {{item.field}}</span>
            </div>
          </Card>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <Button type="primary" ghost long @click="applyExport()" style="margin-top:10px;width:100%;">提交导出申请</Button>
        </Col>
        <Col span="12">
          <Button type="primary" ghost long @click="getExportData()" style="margin-top:10px;width:100%;">刷新导出列表</Button>
        </Col>
      </Row>
      <Row :gutter="16" style="margin-top:10px;">
        <Col span="24">
          <Table disabled-hover border height="250" :columns="export_columns" :data="exportList" size="small" ref="table">
            <template slot="queue_state" slot-scope="{ row }">
              <span v-if="row.queue_state == '0'">等待处理</span>
              <span v-if="row.queue_state == '1'">处理中</span>
              <span v-if="row.queue_state == '2'">处理完成</span>
            </template>
            <template slot="action" slot-scope="{ row }">
              <Row style="margin-bottom: 5px; margin-top: 2px">
                <a :href="row.result_url" v-if="row.queue_state == '2'"><Button class="table-action-btn" style="margin-right: 5px" type="info" size="small">导出</Button></a>
                <!-- <Button class="table-action-btn" style="margin-right: 5px" type="success" size="small" @click="show(row, true)">导出</Button> -->
              </Row>
            </template>
          </Table>
          <Row type="flex" justify="end" class="page_style">
            <Page :current="exportParams.pageNo" :total="exportParams.totalRecord" show-sizer :page-size="exportParams.pageSize" show-elevator
                  @on-change="exportPageAction" @on-page-size-change="exportPageSizeChange"/>
          </Row>
        </Col>
      </Row>
      <!-- <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="exportfa_drawer = false">取消</Button>
        <Button type="primary" @click="saveSelFa()">确定</Button>
      </div> -->
    </Drawer>
    <Drawer title="查询字段设置" v-model="set_drawer" width="320">
      <CheckboxGroup v-model="setCheckboxModel">
        <div v-for="(item, index) in zd_list" v-bind:key="index">
          <Checkbox :label="item.id" :disabled="item.disabled" style="display: block;margin-bottom:5px;">
            <span>{{item.default_field_detail}}</span>
          </Checkbox>
        </div>
      </CheckboxGroup>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="set_drawer = false">取消</Button>
        <Button type="primary" @click="saveZd()">确定</Button>
      </div>
    </Drawer>
    <Modal
        v-model="importModal"
        title="导入信息">
      <div>
        <Tag color="error" size="medium">提示：一次不要导入过多数据</Tag>
      </div>
      <Button type="primary" size="small" style="margin-top: 5px;margin-right:5px" @click="importExcel">导入驻沈党员信息</Button>
    </Modal>
    <div v-if="importModalExcel">
      <Modal
          v-model="importModalExcel"
          width="1800"
          title="导入网格人员数据">
        <dispose-excel :columns="exportColumnsExcel" :url="exportUrlExcel" :failedUrl="exportFailedUrlExcel"></dispose-excel>
      </Modal>
    </div>
    <Modal v-model="fa_name_modal" title="方案名称" width="380">
      <Form :model="fa_params" :label-width="70">
        <Form-item label="方案名称">
        <Input v-model="fa_params.programme_name" placeholder="请输入方案名称"></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="primary" style="margin-top: 5px;margin-right:5px" @click="saveFa()">确定</Button>
        <Button type="default" style="margin-top: 5px;margin-right:5px" @click="fa_name_modal=false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { createSelectProgramme, findDefaultTableList, findDepartmentList, findProgrammeInfoList, getProgrammeInfo, createSelectQueue, findSelectQueueList, findDefaultColumnsList, findDefaultHeaderList, updateDefaultType } from '@/api/a-set-of-watches'
// import DisposeExcel from '../../dispose-excel/dispose-excel'
export default {
  name: 'data-list',
  // components: { DisposeExcel },
  data () {
    return {
      setCheckboxModel: [],
      zd_list: [],
      set_drawer: false,
      loading: true,
      export_params: {},
      exportfa_drawer: false,
      yx_fa_list: [],
      selectfa_drawer: false,
      programme_code: '', // 方案编号
      fa_name_modal: false,
      fa_params: {},
      field_list: [], // 目标数组
      formInfo: {
        department_radio: '',
        business_radio: ''
      },
      faDataList: [],
      programmeTypeData: [[], [], []],
      data3: [],
      targetKeys3: [],
      listStyle: {
        width: '270px',
        height: '575px'
      },
      importModal: false,
      importModalExcel: false,
      exportColumnsExcel: [
        {
          align: 'center',
          title: '姓名',
          key: 'name'
        },
        {
          align: 'center',
          title: '性别',
          key: 'sex'
        },
        {
          align: 'center',
          title: '出生日期',
          key: 'birthday'
        },
        {
          align: 'center',
          title: '手机号码',
          key: 'mobile'
        },
        {
          align: 'center',
          title: '所属部门',
          key: 'department'
        },
        {
          align: 'center',
          title: '单位',
          key: 'company'
        },
        {
          align: 'center',
          title: '职务',
          key: 'duty'
        },
        {
          align: 'center',
          title: '报到时间',
          key: 'checkin_time'
        },
        {
          align: 'center',
          title: '特长',
          key: 'strongpoint'
        }
      ],
      exportUrlExcel: '/api/ac/grid/partyMemberService/savePartyMember',
      exportFailedUrlExcel: '',
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'
        }
      ],
      defaultColumns: [],
      fa_columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        },
        {
          title: '方案名称',
          key: 'cardno',
          align: 'center'
        }
      ],
      export_columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'
        },
        {
          title: '方案名称',
          key: 'programme_name',
          align: 'center'
        },
        {
          title: '开始时间',
          key: 'update_time_begin',
          align: 'center'
        },
        {
          title: '结束时间',
          key: 'update_time_end',
          align: 'center'
        },
        {
          title: '状态',
          slot: 'queue_state',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      exportList: [],
      exportColumns: [
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center'
        },
        {
          title: '出生日期',
          key: 'birthday',
          align: 'center'
        },
        {
          title: '所属部门',
          key: 'department',
          align: 'center'
        },
        {
          title: '单位',
          key: 'company',
          align: 'center'
        },
        {
          title: '职务',
          key: 'duty',
          align: 'center'
        },
        {
          title: '报道时间',
          key: 'checkin_time',
          align: 'center'
        },
        {
          title: '区',
          key: 'area',
          align: 'center'
        },
        {
          title: '街道',
          key: 'street',
          align: 'center'
        },
        {
          title: '社区',
          key: 'community',
          align: 'center'
        }
      ],
      dataList: [],
      formData: {},
      drawer1: false,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      exportParams: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      addFlag: true,
      big_type_dict: '',
      severUserInfo: {},
      templateUrl: 'http://imgdl.tripln.top/webhdfs/v1/importTemplate/grid/驻沈省（中）直机关及企事业单位在职党员导入模板v2_8508686386.xlsx?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0'
    }
  },
  methods: {
    saveFa () { // 保存方案方法
      this.fa_name_modal = false
      createSelectProgramme(this.fa_params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '保存方案成功'
          })
          this.getProgrammeInfoList()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    changeType (index, type, para, radio_type) { // 选择方案类型
      this.formInfo.fa_data = ''
      this.formInfo.fa_radio = ''
      this.fa_params.programme_name = ''
      this.fa_params.programme_code = ''
      this.getDepartmentList(type, index, para, radio_type)
    },
    getMockData () {
      let mockData = []
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i
        })
      }
      return mockData
    },
    getTargetKeys () { // 获取目的列表数据
      if (this.programmeTypeData[2].length > 0) {
        return this.programmeTypeData[2].filter((item) => item.association === '0')
          .map(item => item.key)
      }
    },
    handleChange3 (targetKeys, direction, moveKeys) {
      this.targetKeys3 = targetKeys
    },
    render3 (item) {
      // return item.label + ' - ' + item.description
      return item.label
    },
    reloadMockData () {
      this.data3 = this.programmeTypeData[2]
      this.targetKeys3 = this.getTargetKeys()
    },
    getProgrammeInfoList () {
      findProgrammeInfoList({}).then(res => {
        if (res.data.errcode === 0) {
          this.faDataList = res.data.data
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    selectFa () { // 选择方案进行查询
      this.getProgrammeInfoList()
      this.params.programme_code = ''
      // this.defaultColumns = this.columns
      this.selectfa_drawer = true
      this.formInfo.falist_radio = ''
      this.yx_fa_list = []
      this.faDataList = []
    },
    changeFa (item) { // 选择方案
      let fa_data = JSON.parse(item)
      this.formInfo.fa_radio = fa_data.programme_code
      this.fa_params['programme_name'] = fa_data.programme_name
      this.fa_params['table_name'] = fa_data.table_name
      this.targetKeys3 = [] // 目标
      this.data3 = [] // 源数据
      this.formInfo.department_radio = ''
      this.formInfo.business_radio = ''
      getProgrammeInfo({ programme_code: this.formInfo.fa_radio }).then(res => {
        if (res.data.errcode === 0) {
          let dispose_field_name_list = res.data.data.dispose_field_name_list
          // this.data3 = dispose_field_name_list
          let dispose_field_name = res.data.data.dispose_field_name
          // this.targetKeys3 = dispose_field_name
          dispose_field_name.forEach((element, index) => {
            dispose_field_name_list.forEach((element1, index1) => {
              if (element1.association === '0') { // 不可点
                element1.disabled = true
              }
              if (element === element1.field_name) {
                this.targetKeys3.push(element1.key)
                // this.programmeTypeData[2].push(element1)
              }
            })
          })
          this.data3 = dispose_field_name_list
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    changeFaList () {
      this.yx_fa_list = []
      getProgrammeInfo({ programme_code: this.formInfo.falist_radio }).then(res => {
        if (res.data.errcode === 0) {
          let dispose_field_name_list = res.data.data.dispose_field_name_list
          let dispose_field_name = res.data.data.dispose_field_name
          dispose_field_name.forEach((element, index) => {
            dispose_field_name_list.forEach((element1, index1) => {
              if (element === element1.field_name) {
                this.yx_fa_list.push(element1)
              }
            })
          })
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    changeExList (item) { // 申请导出数据时选择方案
      let data = JSON.parse(item)
      this.export_params = {
        programme_code: data.programme_code,
        programme_name: data.programme_name
      }
      this.yx_fa_list = []
      getProgrammeInfo({ programme_code: data.programme_code }).then(res => {
        if (res.data.errcode === 0) {
          let dispose_field_name_list = res.data.data.dispose_field_name_list
          let dispose_field_name = res.data.data.dispose_field_name
          dispose_field_name.forEach((element, index) => {
            dispose_field_name_list.forEach((element1, index1) => {
              if (element === element1.field_name) {
                this.yx_fa_list.push(element1)
              }
            })
          })
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    saveSelFa () { // 选择方案后进行查询
      // 先拼接table列，然后传方案编号进行数据查询
      console.log(this.columns, '原列')
      this.defaultColumns = JSON.parse(JSON.stringify(this.columns))
      this.yx_fa_list.forEach(element => {
        let data = {
          title: element.field,
          align: 'center',
          key: element.table_name + element.field_name,
          width: '100'
        }
        this.defaultColumns.push(data)
      })
      this.selectfa_drawer = false
      this.init(this.formInfo.falist_radio)
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init(this.formInfo.falist_radio)
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    exportPageAction (page) {
      this.exportParams.pageNo = page
      this.getExportData()
    },
    exportPageSizeChange (e) {
      this.exportParams.pageSize = e
      this.getExportData()
    },
    show (item, flag) {
      this.drawer1 = true
      this.addFlag = flag
      this.formData.name = item.name
      this.formData.sex = item.sex
      this.formData.birthday = item.birthday
      this.formData.mobile = item.mobile
      this.formData.department = item.department
      this.formData.company = item.company
      this.formData.duty = item.duty
      this.formData.strongpoint = item.strongpoint
      this.formData.checkin_time = item.checkin_time
      this.formData.id = item.id
    },
    complete () { // 数组组装
      this.field_list = []
      for (let i = 0; i < this.targetKeys3.length; i++) {
        for (let j = 0; j < this.data3.length; j++) {
          if (this.targetKeys3[i] === j) {
            this.field_list.push(this.data3[j - 1].id)
          }
        }
      }
      this.fa_params['field_list'] = this.field_list
      // this.fa_params['table_name'] = this.field_list[0].table_name
      if (this.formInfo.fa_radio) { // 编辑方案
        this.fa_name_modal = false
        this.fa_params['programme_code'] = this.formInfo.fa_radio
        this.saveFa()
      } else { // 新建方案
        this.fa_name_modal = true
      }
    },
    setData () {
      this.getDepartmentList('department', 0)
      this.getProgrammeInfoList()
      this.formInfo = {}
      this.addFlag = true
      this.drawer1 = true
      this.formData = {}
    },
    init (programme_code) { // 列表数据
      // this.defaultColumns = JSON.parse(JSON.stringify(this.defaultColumns))
      this.defaultColumns = this.defaultColumns
      this.loading = true
      this.params['programme_code'] = programme_code
      findDefaultTableList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          this.loading = false
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
        this.loading = false
      })
    },
    searchData () { // 搜索
      this.params.pageNo = 1
      this.params.programme_code = ''
      this.init(this.formInfo.falist_radio)
    },
    exportFaData () { // 导出时查询方案列表
      this.exportfa_drawer = true
      this.getProgrammeInfoList()
      this.getExportData()
    },
    applyExport () { // 创建导出申请
      createSelectQueue(this.export_params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '导出申请创建成功'
          })
          this.getExportData()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    getExportData () {
      findSelectQueueList(this.exportParams).then(res => {
        if (res.data.errcode === 0) {
          this.exportList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    exportPeopleData () {
      this.importModal = true
    },
    importExcel () {
      this.importModalExcel = true
    },
    getDepartmentList (type, index, para, radio_type) { // 获取部门分类数据
      let param = {}
      if (index === 1 || index === 0) {
        param = {
          department: radio_type,
          type: type
        }
      } else if (index === 2) {
        param = {
          department: this.formInfo.department_radio,
          business: radio_type,
          type: type
        }
      }
      // let params = index = 0 ? param : param1
      findDepartmentList(param).then(res => {
        if (res.data.errcode === 0) {
          this.$set(this.programmeTypeData, index, res.data.data)
          if (index === 2) {
            this.programmeTypeData[2].forEach((element, index) => {
              if (element.association === '0') {
                element['disabled'] = true
              }
            })
            this.targetKeys3 = this.getTargetKeys()
            this.fa_params['table_name'] = this.programmeTypeData[2][0].table_name
            // this.data3 = this.programmeTypeData[2]
          }
          this.data3 = this.programmeTypeData[2]
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    indexIcon (index) { // 下标显示小圆圈
      return `&#${9312 + index};`
    },
    getColumn () {
      this.columns = [{
        title: '序号',
        type: 'index',
        align: 'center',
        width: '60'
      }]
      findDefaultColumnsList({}).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.forEach(element => {
            let data = {}
            if (element.default_field_name === 'labelInfo' || element.default_field_name === 'gridInfo') {
              data = {
                title: element.default_field_detail,
                slot: element.default_field_name,
                width: '300',
                align: 'center'
              }
            } else {
              data = {
                title: element.default_field_detail,
                key: element.default_field_name,
                width: '150',
                align: 'center'
              }
            }
            this.columns.push(data)
          })
          this.defaultColumns = JSON.parse(JSON.stringify(this.columns))
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
        this.loading = false
      })
    },
    setColcumes () { // 查询字段设置
      this.set_drawer = true
      this.getDefaultHeaderList()
    },
    getDefaultHeaderList () {
      this.setCheckboxModel = []
      findDefaultHeaderList({}).then(res => {
        if (res.data.errcode === 0) {
          this.zd_list = res.data.data
          this.zd_list.forEach(element => {
            if (element.default_field_detail === '身份证号') {
              element.disabled = true
            }
            this.setCheckboxModel.push(element.id)
          })
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    saveZd () { // 选择可查询字段后进行保存
      let param = {
        default_header: this.setCheckboxModel
      }
      updateDefaultType(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '字段设置成功'
          })
          this.set_drawer = false
          this.getColumn()
          this.init()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    }
  },
  mounted () {
    this.defaultColumns = JSON.parse(JSON.stringify(this.columns))
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.getColumn()
    this.init()
    this.getDepartmentList('department', 0)
  }
}
</script>

<style scoped>
  .card_div {
    height: 285px;
    overflow-y: scroll;
  }
  .fa_table_div {
    margin-top:  20px;
    font-weight: 500;
  }
  .demo-drawer-footer{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
  }
  .falist_title {
    color: #17233d;
    font-size: 14px;
  }
  .container{
    padding: 12px;
  }
  .page_style {
    margin: 20px 5px;
  }

  .input-frame {
    width: 120px;
    margin-right: 10px;
    float: left;
  }

  .house-list > .group {
    background: white;
    padding: 10px;
    margin-top: 10px;
  }

  .house-list > .group > .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
  }

  .house-list > .group > .item .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
    font-size: 14px;
    color: #333333;
  }

  .house-list > .group > .item .address {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
  }

  .house-list > .group > .item .detail {
    font-size: 12px;
    color: dodgerblue;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }

  .table-action-btn {
    margin-bottom: 3px;
  }

  .container >>> .ivu-btn-small {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
  }

  .btn-action {
    margin-bottom: 10px;
  }

  .mp10 {
    margin-right: 10px;
  }
  .title-style {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .ivu-table-row {
    height: 57px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    /*border: 1px solid #eee;*/
  }
  .container>>>.ivu-icon-ios-arrow-forward:before{
    color: black;
  }
  .btnClass{
    margin-top: 5px;
    margin-right:5px
  }
</style>
